import {h, toRef} from "vue"
import type {StnDataTableColumns} from 'st-ui-vue3-navie'
import {genTableCol, genLeftFixedTableCol, genRightFixedTableCol} from 'st-ui-vue3-navie'
import {objCopyDeep} from "st-common-core"
import {MenuIcon, MenuType, MenuTypeEnum, MenuIconTypeEnum, MenuObjPropNameEnum} from "@menu"
import {NaSwitchTag, TableEditDelBtnGroup} from "@components"
import MenuTypeTag from "../components/MenuTypeTag.vue"
import MenuIconTypeTag from "../components/MenuIconTypeTag.vue"

// 表格列配置
export const MenuTableCols: StnDataTableColumns = [
  genLeftFixedTableCol('ID', MenuObjPropNameEnum.ID, 100, false, {align: 'left', draggable: false}),
  genLeftFixedTableCol('菜单名称', MenuObjPropNameEnum.NAME, 100, true),
  genTableCol('菜单类型', MenuObjPropNameEnum.TYPE, 80, false, {
    render: (row) => h(
      MenuTypeTag,
      {
        type: row[MenuObjPropNameEnum.TYPE] as MenuTypeEnum
      }
    )
  }),
  genTableCol('父级菜单 ID', MenuObjPropNameEnum.PARENT_ID, 100),
  genTableCol('路由名称', MenuObjPropNameEnum.ROUTE_NAME, 200, true),
  genTableCol('路由路径', MenuObjPropNameEnum.ROUTE_PATH, 200, true),
  genTableCol('路由参数', MenuObjPropNameEnum.ROUTE_QUERY, null, true, {checked: false}),
  genTableCol('链接路径', MenuObjPropNameEnum.LINK_PATH, null, true, {checked: false}),
  genTableCol('图标', MenuObjPropNameEnum.ICON, 60, false, {
    render: (row) => h(
      MenuIcon,
      {
        icon: row[MenuObjPropNameEnum.ICON],
        iconType: row[MenuObjPropNameEnum.ICON_TYPE],
        pop: true,
      }
    )
  }),
  genTableCol('图标类型', MenuObjPropNameEnum.ICON_TYPE, 80, false, {
    checked: false,
    render: (row) => h(
      MenuIconTypeTag,
      {
        type: row[MenuObjPropNameEnum.ICON_TYPE] as MenuIconTypeEnum
      }
    )
  }),
  genTableCol('排序', MenuObjPropNameEnum.SORT, 80, false, {sorter: (a, b) => a.sort - b.sort}),
  genTableCol('是否禁用', MenuObjPropNameEnum.DISABLED, 80, false, {
    render: (row) => h(
      NaSwitchTag,
      {
        value: !row[MenuObjPropNameEnum.DISABLED],
        onText: '启用',
        offText: '禁用'
      }
    )
  }),
  genTableCol('是否隐藏', MenuObjPropNameEnum.HIDDEN, 80, false, {
    render: (row) => h(
      NaSwitchTag,
      {
        value: !row[MenuObjPropNameEnum.HIDDEN],
        onText: '显示',
        offText: '隐藏'
      }
    )
  }),
  genTableCol('是否缓存', MenuObjPropNameEnum.CACHED, 80, false, {
    render: (row) => h(
      NaSwitchTag,
      {
        value: row[MenuObjPropNameEnum.CACHED] as boolean,
        onText: '缓存',
        offText: '不缓存'
      }
    )
  }),
  genTableCol('是否开启标签页', MenuObjPropNameEnum.LABELED, 130, false, {
    render: (row) => h(
      NaSwitchTag,
      {
        value: row[MenuObjPropNameEnum.LABELED] as boolean
      }
    )
  }),
  genTableCol('在标签页中的排序', MenuObjPropNameEnum.LABEL_SORT, 140),
  genRightFixedTableCol('操作', 'actions', 80, false, {
    draggable: false,
    render: row => h(
      TableEditDelBtnGroup,
      {
        form: toRef(objCopyDeep({
          origin: row,
          excludeProps: [MenuObjPropNameEnum.CHILDREN]
        })).value,
        'update:form': (newForm: MenuType) => {
          for (const key in newForm) {
            Reflect.set(row, key, Reflect.get(newForm, key))
          }
        },
        getKey: () => row[MenuObjPropNameEnum.ID],
        isDelCascadeConfirm: true,
        delCascadeConfirmText: '是否级联删除子级菜单？'
      }
    )
  }),
]
